<template>
  <div class="index" @wheel="e_scrollLoad">
    <myhead></myhead>
    <div class="content" id="main-content">
      <transition name="fade">
        <div style="min-height: calc(100% - 50px)">
          <keep-alive :max="1">
            <router-view v-if="$route.meta && $route.meta.keepalive"/>
          </keep-alive>
          <router-view v-if="!$route.meta || !$route.meta.keepalive"/>
        </div>
      </transition>
      <myfoot></myfoot>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import myhead from '@/component/myhead'
  import myfoot from '@/component/myfoot'

  export default {
    data () {
      return {
        hoverVisible: false,
        contentElement: null
      }
    },
    components: {myhead, myfoot},
    mounted () {
      this.contentElement = document.getElementById('main-content')
    },
    methods: {
      e_scrollLoad (e) {
        const {contentElement} = this
        let scrollTop = contentElement.scrollTop
        this.$emit('global:ScrollBarPositionChange', scrollTop)
        if (scrollTop > 200) {
          if (e.deltaY > 0) {
            this.$emit('global:HeadSlotShow', true)
          } else {
            this.$emit('global:HeadSlotShow', false)
          }
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

  @import '../common/stylus/md'

  *
    box-sizing border-box
    ::-webkit-scrollbar
      width 8px
      height 8px
      border-radius 5px
      background-color rgba(210, 210, 210, 0)

    ::-webkit-scrollbar-thumb
      width 6px
      border-radius 4px
      box-shadow inset 0 0 0 rgba(178,187,191,0.59)
      background-color rgba(178,187,191,0.59)
      cursor pointer
      &:hover
        background-color rgba(157,164,168,0.98)
    ::-webkit-scrollbar-corner, ::-webkit-resizer
      background-color rgba(210, 210, 210, 0)

  html, body
    margin 0
    font-family font-family -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif

  .el-message
    z-index 5000

  .index
    height 100%
    overflow hidden

    a:link {
      text-decoration: none;
    }

    a:active {
      text-decoration: none
    }

    a:hover {
      text-decoration: none;
    }

    a:visited {
      text-decoration: none;
    }
    @keyframes bounce-in {
      0% {
        opacity 0
      }
      100% {
        opacity 1
      }
    }
    .fade-enter-active
      animation bounce-in 1s

    .content
      height calc(100% - 42px)
      overflow auto
      margin-top 42px

    .push
      height 100px

  .snow_hover_scene
    width: 100%;
    height: 100%;
    perspective: 5200px;
    .snow_hover_cube
      min-height: calc(100vh - 50px)
      position: relative;
      width 100%
      height 100%
      transform-style preserve-3d
      transform-origin 0 0 1300px
      .snow_hover_side
        padding-top 42px
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      .left
        background-color: rgba(32, 170, 151, 0.5)
        transform: translateX(-1300px) translateZ(-1300px) rotateY(90deg)
      .back
        background-color: rgba(32, 170, 151, 0.5)
        transform: translateZ(-2600px)
      .right
        background-color: rgba(32, 170, 151, 0.5)
        transform: translateX(1300px) translateZ(-1300px) rotateY(90deg)

  .el-radio
    .el-radio__input.is-checked+.el-radio__label
      color unset
    .el-radio__input.is-checked .el-radio__inner
      background unset
      background-color #668c6e
      border-color #668c6e

  .content
    .loading
      height 500px
      text-align center
      img
        margin-top 100px
        height 100px
    .transition-slow
      transition all 5s

</style>
